<template>
  <div class="container">
    <div class="header">
      <span class="back">返回</span>
      <div class="total">
        <div class="year">
          <el-select
            v-model="selectDate.year"
            @change="changeYear"
            :popper-append-to-body="false"
            placeholder="请选择查询年份"
          >
            <el-option
              v-for="(item, index) in base.year"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="year">
          <el-select
            v-model="selectDate.mon"
            :disabled="!selectDate.year"
            :popper-append-to-body="false"
            placeholder="请选择查询月份"
            @change="changemon"
          >
            <el-option
              v-for="(item, index) in base.mon"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="year">
          <el-select
            v-model="selectDate.day"
            :disabled="!selectDate.mon"
            :popper-append-to-body="false"
            @change="changeDay"
            placeholder="请选择查询日期"
          >
            <el-option
              v-for="(item, index) in base.day"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <span>今年消费合计：{{ yearTotal }}</span>
        <span>当月消费合计：{{ monTotal }}</span>
        <span>当天消费合计：{{ dayTotal }}</span>
      </div>
    </div>
    <div class="box">
      <div class="details">
        <el-table :data="details" :row-style="{ color: '#FF6A6A' }" :fit="true">
          <el-table-column
            align="center"
            prop="type"
            label="消费类型"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="money"
            label="消费金额"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="desc"
            label="消费描述"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="createTime"
            label="消费时间"
          ></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { toRefs, onMounted } from "vue";
import expenseDataJS from "./expenseData.js";
export default {
  name: "",
  setup() {
    let {
      status,
      methodFun: { getAll, changeYear, changemon, changeDay },
    } = expenseDataJS();
    let {
      userinfo,
      initData,
      dayList,
      base,
      selectDate,
      details,
      yearTotal,
      monTotal,
      dayTotal,
    } = toRefs(status);
    onMounted(() => {
      getAll();
    });
    return {
      changeYear,
      changemon,
      changeDay,
      userinfo,
      initData,
      dayList,
      base,
      selectDate,
      details,
      yearTotal,
      monTotal,
      dayTotal,
    };
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-table {
  background-color: transparent;
}

/deep/.el-table th,
.el-table tr {
  background-color: transparent !important;
}
/deep/ .el-select-dropdown {
  background-color: transparent;
  margin: 0px;
  border: 0px;
  border-radius: 0px;
}
/deep/.el-popper.is-light{
  background-color:  rgba(255,255,255,.4);
}
/deep/ .el-select-dropdown__item.hover,
/deep/ .el-select-dropdown__item:hover {
  color: pink;
}
/deep/ .el-select-dropdown__item {
  background-color: transparent;
  color: #409eff;
}
/deep/.el-input__inner {
  background-color: transparent !important;
  color:pink;
}
/deep/.el-scrollbar{
  background-color: transparent !important;
}
/deep/.el-select-dropdown__list{
   background-color: transparent !important;
}
/deep/.el-scrollbar__wrap,
.el-select-dropdown__wrap {
  background-color: transparent !important;
}

.container {
  display: flex;
  flex-direction: column;
  .header {
    display: flex;
    height: 40px;
    box-sizing: border-box;
    justify-items: center;
    font-size: 18px;
    color: pink;
    border-bottom: 1px solid pink;
    .back {
      width: 100px;
    }
    .total {
      display: flex;
      width: 100%;
      justify-content: space-around;
      align-items: center;
      height: 40px;
      // background-color: red;
      span {
        margin-right: 50px;
      }
    }
  }
  .box {
    flex: 1;
    display: flex;
    .select {
      width: 300px;
      height: 100%;
      border-right: 1px solid pink;
    }
    .details {
      flex: 1;
      height: 100%;
      //   background-color: pink;
    }
  }
}
</style>
